import {CSSProperties, useEffect, useRef} from "react";
import {useMateRailDrop} from "../../../hooks/useMaterialDrop.ts";
import {useDrag} from "react-dnd";
import {CommonComponentProps} from "../../../../components/editor/interface.ts";
import {ContainerDndAccept} from "../../DnDAccept.tsx";

export interface FlexProps extends CommonComponentProps {
    id: number;
    name: string;
    parentId?: number;
    styles?: CSSProperties;
    children?: any;
    wrap:any
    vertical:any
    align:string
    justify:string
    gap:number
}

const FlexDev = (props: FlexProps) => {
    const {id, name, wrap, vertical, align, justify, gap, styles} = props
    const FlexRef = useRef<any>(null)

    const {canDrop, drop} = useMateRailDrop([...ContainerDndAccept], id)
    const [_, drag] = useDrag({
        type: "Flex",
        item: {
            type: name,
            dragType: 'move',
            id
        }
    });
    useEffect(() => {
        if (!FlexRef.current) return
        drop(FlexRef)
        drag(FlexRef)
    }, []);
    return (
        <div ref={FlexRef}
             style={{
                 flexDirection: vertical,
                 justifyContent: justify,
                 alignItems: align,
                 flexWrap: wrap,
                 gap: gap, ...styles
             }}
             data-component-id={id}
             className={`flex justify-start gap-10 p-[20px]  h-[auto] 
              ${canDrop ? 'border-[2px] border-[blue]' : 'border-[1px] border-[#000]'}`
             }>
            {
                // @ts-ignore
                props.children?.length > 0 ? props.children : <div
                    className={'bg-gray-300 w-full h-[200px] min-h-[100%]  flex justify-center items-center'}>将组件拖拽到此处</div>
            }
        </div>
    );
};

export default FlexDev;